{extend name="common@base" /}
{block name="content"}
<link rel="stylesheet" href="__STATIC__/dataTables/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="__STATIC__/dataTables/buttons/css/buttons.dataTables.css">
<link rel="stylesheet" href="__STATIC__/dataTables/buttons/css/buttons.bootstrap.css">
<section class="content" id="container">
  <div class="box box-primary">
    <div class="box-body table-responsive">
      <table id="myTable" class="table table-striped">
        <thead>
        <tr>
          <th>序号</th>
          <th>角色名称</th>
          <th>角色功能</th>
          <th>排序</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
        <tr>
          <th></th>
          <th class="js-th-search"></th>
          <th></th>
          <th></th>
          <th></th>
        </tr>
        </tfoot>
      </table>
    </div>
  </div>

</section>
{/block}
{block name="page_script"}
<script>


  require(["layer_config","datatables.net-select", "datatables.net-buttons-print", "datatables.net.bootstrap",
    "datatables.net-buttons-html5", "datatables.net-buttons-colVis",
    "datatables.net-buttons-flash",], function (layer) {
    var table = $("#myTable").DataTable({
      "dom": 'Brtip',
      "displayLength": 10,
      "processing": true,
      "language": {
        "paginate": {
          "next": "下一页",
          "previous": "上一页",
        },
        url: '//cdn.datatables.net/plug-ins/1.10.16/i18n/Chinese.json',
        "decimal": "-",
        "thousands": ".",
        "processing": "数据表格正在处理中，请等待后台数据。",
        "loadingRecords": "请等待，后台数据载入中",
        infoEmpty: "显示第 0 至 0 项结果，共 0 项"
      },
      "scrollX": true,
      "autoWidth": false,
      buttons: {
        buttons: [
          {
            text: '新建角色',
            className: "btn-primary",
            action: function (e, dt, node, config) {
              window.location.href = "{:url('edit')}";
            }
          },
          {extend: 'excel', text: '导出Excel', exportOptions: {columns: ':visible'},},
          {extend: 'print', text: '打印', exportOptions: {columns: ':visible'},},
        ]
      },
      "search": {
        "smart": false
      },
      "stateSave": true,
      //serverSide: true,
      ajax: {
        url: "{:url('index')}",
        dataSrc: 'data',
        type: 'POST'
      },
      columnDefs: [
        {"orderable": true, targets: 0, type: 'number'},
        {"orderable": false, targets: 1, type: 'string'},
        {"orderable": false, targets: 2, type: 'string'},
        {"orderable": true, targets: 3, type: 'number'},
        {"orderable": false, targets: 4, type: 'string'},
      ],
      "columns": [
        {"data": "id", width: "10%"},
        {"data": "title", width: "20%"},
        {"data": "desc", width: "30%"},
        {"data": "sort", width: "10%"},
        {"data": null, width: "20%"},
      ],
      "createdRow": function (row, data, dataIndex) {
        var dataid = data.id, html = '';
        html = "<a href='{:url(edit)}?id=" + dataid + "' class='btn btn-default btn-sm'>编辑</a> ";
        html += "<a href='{:url(user)}?id=" + dataid + "' class='btn btn-default btn-sm'>人员</a> ";
        html += "<a href='{:url(menu)}?id=" + dataid + "' class='btn btn-default btn-sm'>菜单</a> ";
        html += "<a href='{:url(auth)}?id=" + dataid + "' class='btn btn-default btn-sm'>权限</a> ";
        html += "<a href='{:url(delete)}?id=" + dataid + "' class='btn btn-danger btn-sm js-confirm'>删除</a> ";

        $(row).find("td").eq(4).html(html);
      },
      "select": true,
      fixedHeader: true,
      "infoCallback": function (settings, start, end, max, total, pre) {
        return '';
      }
    });
    table.columns().every(function () {
      var that = this;
      $('input', this.footer()).on('change', function () {
        if (that.search() !== this.value) {
          console.log(this.value);
          that
            .search(this.value)
            .draw();
        }
      });
    });
  });

  $('#myTable tfoot th.js-th-search').each(function () {
    var title = $('#myTable thead th').eq($(this).index()).text();
    $(this).html('<input type="text" placeholder="查询' + title + '" />');
  });
</script>
{/block}
